<template>
	<view>
		<view class="content">
			<view class="content-box">
				<view class="content-tetx" v-for="item in contentData" :key="item.id">
					<view class="content-image"><img class="images" :src="item.img" alt=""></view>
					<view class="content-name">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	const contentData = reactive([
		{text:'我的订单', img:'https://cdn.asiatop.net/resources/vouchery/static/order.png',id:1},
		{text:'我的卡券', img:'https://cdn.asiatop.net/resources/vouchery/static/coupon.png',id:2},
		{text:'我的收藏', img:'https://cdn.asiatop.net/resources/vouchery/static/user-collections.jpg',id:3},
		{text:'我的足迹', img:'https://cdn.asiatop.net/resources/vouchery/static/user-tracks.jpg',id:4},
		{text:'客服', img:'https://cdn.asiatop.net/resources/vouchery/static/customer.png',id:5},
		{text:'地址', img:'	https://cdn.asiatop.net/resources/vouchery/static/address.png',id:6},
		{text:'切换语言', img:'https://cdn.asiatop.net/resources/vouchery/static/i18n.png',id:7},
		{text:'我的积分', img:'https://cdn.asiatop.net/resources/vouchery/static/atp.png',id:8}
	])

	onLoad(()=>{
	})
	
	
</script>

<style>
.content{
	height: 300rpx;
	background-color: #fff;
}
.content-box{
	padding: 20rpx;
    text-align: center;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.content-image{
	margin: 20rpx auto;
    width: 50rpx;
    height: 50rpx;
}
.images{
	width: 100%;
	height: 100%;
}
.content-name{
	font-size: 24rpx;
}


</style>
